<template>
    <div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-row>
					<el-form-item label="菜单名" prop="menuName">
						<el-input v-model="ruleForm.menuName" placeholder="请输入菜单名"></el-input>
					</el-form-item>
                    
					<el-form-item label="是否拥有上级" prop="Status">
						<el-switch v-model="pState" ></el-switch>
					</el-form-item>

					<el-form-item label="网址" prop="url">
						<el-input v-model="ruleForm.url" :disabled="!pState" placeholder="请输入网址"></el-input>
					</el-form-item>
                    
					<el-form-item label="上级菜单" prop="parentID">
						<el-select v-model="ruleForm.parentID" :disabled="!pState" placeholder="请选择上级菜单" >
							<el-option v-for="(item, index) in parent" :key="index" :label="item.MenuName"
								:value="item.MenuID"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('ruleForm')">添加菜单</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
			</el-row>
		</el-form>
    </div>
</template>

<script>
export default {
    name:'add',
    data() {
        return {
			parent: [],
            pState:null,
            ruleForm:{
                menuID:null,
                menuName:null,
                url:null,
                parentID:null,
                icon:null,
                lastTime:null,
            },
			rules: {
				menuName: [
					{
						required: true,
						message: "请输入菜单名",
						trigger: "blur",
					}
                ],
				parentID: [
					{
						required: this.pState,
						message: "请选择上级菜单",
						trigger: "blur",
					}
                ]
            }
        }
    },
	methods: {
        displayp(){

        },
		//提交表单
		submitForm(formName) {
			console.log(this.ruleForm);
			this.$refs[formName].validate((valid) => {
				if (valid) {
                    if(!this.pState){
                        this.ruleForm.parentID=0;
						this.ruleForm.url='';
                    }
                    console.log('ruleForm')
                    console.log(this.ruleForm)
					this.axios({
						method: "POST",
						url: "Menus",
						data: JSON.stringify(this.ruleForm),
						headers: {
							Authorization: sessionStorage.getItem("token"),
							"Content-Type": "application/json",
						},
					})
						.then((res) => {
							console.log(res.data)
							if (res.data.msg == "菜单添加成功！") {
								this.$notify({
									title: "成功",
									message: res.data.msg,
									type: "success",
								});
								// 触发刷新
								this.$emit("refresh");
								this.$emit("change", false);

							} else {
								this.$notify.error({
									title: "错误",
									message: res.data.msg,
								});
								
								this.$notify.error({
									title: "错误",
									message: res.data.msg,
								});

							}
						})
						.catch((err) => {
							console.log("err: ", err);
							this.$notify.error({
								title: "错误",
								message: err.message,
							});
						});

				} else {
					console.log("error submit!!");
					return false;
				}
			});
		},
		//重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
    },
	created() {
		this.axios({
			method: "get",
			url: "Menus/GetParent",
			headers: {
				Authorization: sessionStorage.getItem("token"),
			},
		}).then((res) => {
			this.parent = res.data;
            console.log(res.data)
			this.ruleForm.parentID = this.parent[0].parentID;
		});
	}
}
</script>

<style scoped>
</style>